/**
 * 게시판 검색 필터 스킨 스타일시트
 * CSS 변수를 사용하여 간격과 크기를 쉽게 조정 가능하도록 개선
 */

/* ============================================
   CSS 변수 정의 - 여기서 모든 간격과 크기를 조정할 수 있습니다
   ============================================ */
:root {
    /* 기본 간격 */
    --spacing-xs: 2px;
    --spacing-sm: 1px;
    --spacing-md: 4px;
    --spacing-lg: 10px;
    --spacing-xl: 25px;
    --spacing-xxl: 50px;
    
    /* 행 높이 */
    --row-height-small: 15.6px;
    --row-height-medium: 15.7px;
    --row-height-default: 15.8px;
    --row-height-tall: 17px;
    --row-height-header: 51px;
    
    /* 열 너비 */
    --col-width-title: 35px;
    --col-width-content: 55px;
    --col-width-content-wide: 65px;
    --col-width-order: 160px;
    --col-width-inner-wrap: 550px;
    --col-width-main-table: 1228px;
    --col-width-container: 1300px;
    
    /* 여백 */
    --margin-left-order: 25px;
    --margin-left-button: 50px;
    --margin-left-private: 250px;
    --margin-bottom-area: 10px;
    --margin-right-area: 50px;
    --margin-bottom-small: 3px;
    --margin-bottom-medium: 5px;
    
    /* 2차 종목창 설정 */
    --secondary-menu-margin-top: 5px; /* 2차 항목창 상단 여백 (고정) */
    --secondary-menu-start-offset: 70px; /* 2차 항목창 시작 위치 (왼쪽 여백) */
    --secondary-menu-min-width: 100px; /* 2차 항목창 최소 너비 */
    --secondary-menu-max-width: var(--col-width-container); /* 2차 항목창 최대 너비 */
    
    /* 색상 */
    --color-bg-default: #f8f8f0;
    --color-bg-title: #5a8fd4;
    --color-bg-inner-title: #a6c8dac7;
    --color-bg-content: #ceeffb;
    --color-bg-private: #ff00007a;
    --color-bg-button: #f5f5fc;
    --color-border-default: #888;
    --color-border-black: black;
    --color-border-button: #bbb;
    --color-text-hover: red;
    
    /* 2차 종목창 '전체' 항목 스타일 */
    --secondary-menu-all-color: var(--color-text-hover);
    --secondary-menu-all-bg: rgba(255, 0, 0, 0.1);
    --secondary-menu-all-bg-hover: rgba(255, 0, 0, 0.2);
    --secondary-menu-all-padding: 2px 6px;
    --secondary-menu-all-border-radius: 3px;
    --secondary-menu-all-font-weight: bold;
    
    /* 2차 종목창 구분자 스타일 */
    --secondary-menu-separator-color: #888;
    --secondary-menu-separator-margin: 0 8px;
    --secondary-menu-separator-font-size: 10px;
    
    /* 폰트 크기 */
    --font-size-small: 12px;
    --font-size-default: 12px;
    --font-size-medium: 14px;
}

/* ============================================
   기본 레이아웃
   ============================================ */



.index-wrap {
    min-height: 0px;
    line-height: 1.5;
}

.index-wrap div {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

.index-wrap ul {
    display: flex;
    padding: 0px;
    border: 0px solid #ddd;
    margin: 0px;
    flex-wrap: wrap;
    font-size: var(--font-size-small);
}

.index-wrap ul.fl {
    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: nowrap;
}

.index-wrap ul.fl:after {
    content: '';
    display: block;
    clear: both;
}

.index-wrap ul.fl li {
    float: left;
}

.index-wrap ul.fl li.key {
    height: 20px;
    line-height: 20px;
}

.index-wrap ul.fl li.key2 {
    height: 19px;
    line-height: 17px;
    background-color: #ff000014;
    padding-right: var(--spacing-md);
}

.index-wrap ul.fl li.key3 {
    height: 19px;
    line-height: 20px;
    background-color: #D7E7DC;
}

.index-wrap ul li {
    list-style-type: none;
    padding: 0px;
}

.index-wrap ul li.key {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-bg-inner-title);
    border-right: 1px solid #ddd;
}

.index-wrap ul li.key1 {
    border: 1px ridge;
    font-weight: bold;
}

.index-wrap ul li.value {
    white-space: nowrap;
    padding-top: var(--spacing-sm);
}

.index-wrap ul li.value1 {
    list-style-type: none;
    padding: 0 var(--spacing-xs);
}

.index-wrap ul li.value2 {
    list-style-type: none;
    padding: 0 4px;
}

.index-wrap ul li.wide {
    width: 50px;
    text-align: center;
}

.index-wrap ul li.full {
    width: 60%;
    text-align: left;
}

.narrow {
    padding: 0 var(--spacing-xs) !important;
    letter-spacing: -1px;
}

/* ============================================
   정렬 영역
   ============================================ */
.order_area {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 48%;
    font-size: var(--font-size-default);
    margin-bottom: var(--spacing-md);
    margin-left: var(--margin-left-order);
}

.title_name_order {
    border-top: 1px solid var(--color-border-black);
    border-left: 1px solid var(--color-border-black);
    border-bottom: 1px solid var(--color-border-black);
    border-right: 1px solid var(--color-border-default);
}

.order_box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-top: 1px solid var(--color-border-black);
    border-right: 1px solid var(--color-border-black);
    border-bottom: 1px solid var(--color-border-black);
    width: var(--col-width-order);
    background-color: var(--color-bg-default);
}

.order_title {
    margin-right: var(--spacing-md);
    margin-left: var(--spacing-md);
}

/* ============================================
   세부목록 버튼
   ============================================ */
.listen-button {
    font-size: var(--font-size-default);
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-left: var(--margin-left-button);
    cursor: pointer;
    border: 1px solid var(--color-border-button);
    background-color: var(--color-bg-button);
    border-radius: 5px;
    color: #333;
}

.listen-button:focus {
    outline: none;
}

/* ============================================
   상단 필터 영역
   ============================================ */
.upper_area {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: var(--margin-bottom-area);
    margin-right: var(--margin-right-area);
}

.col_up {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: var(--col-width-container);
    margin-bottom: 5px !important;
}

.col-sm-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid var(--color-border-black);
    border-bottom: 1px solid var(--color-border-black);
    margin-bottom: var(--margin-bottom-small);
    font-size: var(--font-size-default);
    width: 48%;
    background-color: var(--color-bg-default);
}

.col-sm-title2 {
    border: 1px solid var(--color-border-black);
    margin-bottom: var(--margin-bottom-small);
    display: flex;
    justify-content: flex-start;
    /* 2차 항목으로 표 높이가 늘어날 때, 좌측 '역사자료'와 '내용' 컬럼도
       전체 높이에 맞춰 자연스럽게 늘어나도록 stretch 사용 */
    align-items: stretch;
    font-size: var(--font-size-default);
    width: var(--col-width-container);
}

.title_name {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--col-width-title);
    color: black;
    font-weight: bold;
    background-color: var(--color-bg-title);
    border-right: 1px solid var(--color-border-default);
    /* 부모(.col-sm-title2)가 늘어날 때 같이 늘어나도록 */
    align-self: stretch;
}

.title_name.tall {
    /* 고정 높이를 없애고, 전체 영역 높이에 맞게 자동 확장 */
    height: auto;
}

.inner_title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: var(--col-width-title);
    border-right: 1px solid var(--color-border-default);
    color: blue;
    background-color: var(--color-bg-inner-title);
    /* 부모 높이에 맞춰 함께 늘어나도록 */
    align-self: stretch;
}

.inner_title.tall {
    /* 고정 높이 제거 - 전체 영역에 맞춰 자동 확장 */
    height: auto;
}

.inner_title .top {
    width: var(--col-width-title);
    height: var(--row-height-tall);
    border-bottom: 1px solid var(--color-border-default);
}

.inner_title .bottom {
    width: var(--col-width-title);
    /* 고정 높이 대신 flex로 상하 전체를 채우도록 */
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner_value_wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: var(--col-width-inner-wrap);
    background-color: var(--color-bg-default);
}


.inner_value_wrap.header {
    width: var(--col-width-main-table);
    border-bottom: 1px solid var(--color-border-default);
    height: var(--row-height-tall);
    background-color: white;
    box-sizing: border-box;
}

.inner_value_wrap2 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: var(--col-width-main-table);
    margin: 0;
    padding: 0;
}

.inner_value {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px !important;
    margin-left: 5px !important;
    white-space: nowrap;
}

/* ============================================
   콘텐츠 행 (각 카테고리 행)
   ============================================ */
.inner_content_wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: var(--col-width-main-table);
    height: var(--row-height-tall);
    background-color: var(--color-bg-default);
    border-bottom: 1px solid var(--color-border-default);
    box-sizing: border-box;
}

.content_title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--col-width-content);
    height: var(--row-height-default);
    background-color: var(--color-bg-content);
    border-right: 1px solid var(--color-border-default);
}

.content_title.with-border {
    border-left: 1px solid var(--color-border-default);
}

.content_title.wide {
    width: var(--col-width-content-wide);
}

.content_title.height-small {
    height: var(--row-height-small);
}

.content_title.height-medium {
    height: var(--row-height-medium);
}

.content_title.private {
    border-left: 1px solid var(--color-border-default);
    height: var(--row-height-small);
    margin-left: var(--margin-left-private);
    background-color: var(--color-bg-private);
}

.content_value {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: var(--margin-bottom-area);
    margin-left: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.content_value > div {
    white-space: nowrap;
}

.content_value a {
    margin-right: var(--spacing-xs);
    margin-left: var(--spacing-xs);
}

/* ============================================
   2차 종목창 스타일 (기존 표와 완전히 별개)
   ============================================ */
.secondary-menu {
    display: none;
    margin-top: var(--secondary-menu-margin-top);
    width: var(--col-width-main-table);
    min-width: var(--secondary-menu-min-width);
    max-width: var(--secondary-menu-max-width);
    border: 0px solid var(--color-border-black);
    background-color: var(--color-bg-default);
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-border-default);
}

.secondary-menu.active {
    display: block;
    margin-bottom: 0px !important;
}

/* 1차 항목별로 다른 설정을 적용할 수 있는 클래스들 */
.secondary-menu.custom-width-small {
    min-width: 150px;
    max-width: 300px;
}

.secondary-menu.custom-width-medium {
    min-width: 300px;
    max-width: 600px;
}

.secondary-menu.custom-width-large {
    min-width: 600px;
    max-width: var(--col-width-container);
}



/* 왼쪽 마진을 조절하는 클래스들 */
.secondary-menu.custom-offset1 {
    margin-left: 10px !important;
}

.secondary-menu.custom-offset2 {
    margin-left: 45px !important;
}

.secondary-menu.custom-offset3 {
    margin-left: 100px !important;
}

.secondary-menu.custom-offset4 {
    margin-left: 140px !important;
}

.secondary-menu.custom-offset5 {
    margin-left: 160px !important;
}

.secondary-menu.custom-offset6 {
    margin-left: 35px !important;
}

.secondary-menu.custom-offset7 {
    margin-left: 150px !important;
}

.secondary-menu.custom-offset8 {
    margin-left: 190px !important;
}

.secondary-menu.custom-offset9 {
    margin-left: 230px !important;
}



.secondary-menu-row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    min-height: var(--row-height-tall);
    background-color: var(--color-bg-default);
    border-bottom: 0px solid var(--color-border-default);
    box-sizing: border-box;
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
}

.secondary-menu-value {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    width: 100%;
    margin-right: var(--margin-bottom-area);
    margin-left: var(--secondary-menu-start-offset);
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    background-color: white !important;
}

.secondary-menu-value > div {
    white-space: nowrap;
}

.secondary-menu-value a {
    margin-right: var(--spacing-xs);
    margin-left: var(--spacing-xs);
    font-size: 10px !important;
}

.secondary-menu-value a:hover {
    cursor: pointer;
    text-decoration: underline;
    color: var(--color-text-hover);
}

/* ============================================
   '전체' 항목 스타일 (별도 디자인 - CSS 변수로 쉽게 조정 가능)
   ============================================ */
.secondary-menu-item-all {
    font-weight: var(--secondary-menu-all-font-weight);
    color: var(--secondary-menu-all-color);
    background-color: var(--secondary-menu-all-bg);
    padding: var(--secondary-menu-all-padding);
    border-radius: var(--secondary-menu-all-border-radius);
}

.secondary-menu-item-all a {
    color: var(--secondary-menu-all-color);
    font-weight: var(--secondary-menu-all-font-weight);
}

.secondary-menu-item-all a:hover {
    background-color: var(--secondary-menu-all-bg-hover);
    text-decoration: underline;
}

/* ============================================
   2차 종목창 구분자 스타일
   ============================================ */
.secondary-menu-separator {
    color: var(--secondary-menu-separator-color);
    margin: var(--secondary-menu-separator-margin);
    font-size: 12px;
    user-select: none;
    pointer-events: none;
}

/* 클릭 가능한 항목에 커서 포인터 추가 */
.content_title a,
.content_value a {
    cursor: pointer;
    position: relative;
}

/* ============================================
   호버 효과
   ============================================ */
.inner_value_wrap > div > a:hover,
.content_value > div > a:hover,
.order_box > div > a:hover,
.index-wrap ul li.value a:hover,
.index-wrap ul li.key.wide a:hover,
.index-wrap ul li.value.narrow a:hover {
    cursor: pointer;
    text-decoration: underline;
    color: var(--color-text-hover);
}

.inner_value_wrap > div > a:focus,
.content_value > div > a:focus,
.index-wrap ul li.value a:focus,
.index-wrap ul li.key.wide a:focus,
.index-wrap ul li.value.narrow a:focus {
    color: var(--color-text-hover);
}

/* ============================================
   테이블 스타일 (기존 유지)
   ============================================ */
.tg {
    line-height: 1;
    border-collapse: collapse;
    border-spacing: 0;
}

.tg td {
    border-color: black;
    border-style: solid;
    border-width: 1px;
    font-family: Arial, sans-serif;
    font-size: var(--font-size-medium);
    overflow: hidden;
    padding: var(--margin-bottom-area) var(--spacing-md);
    word-break: normal;
}

.tg th {
    border-color: black;
    border-style: solid;
    border-width: 1px;
    font-family: Arial, sans-serif;
    font-size: var(--font-size-medium);
    font-weight: normal;
    overflow: hidden;
    padding: var(--margin-bottom-area) var(--spacing-md);
    word-break: normal;
}

.tg .tg-8wv0 {
    background-color: #d7e7dc;
    border-color: #000000;
    color: #333333;
    font-size: var(--font-size-medium);
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
}

.tg .tg-0a7q {
    border-color: #000000;
    text-align: center;
    vertical-align: middle;
}

.tg .tg-9wq8 {
    border-color: inherit;
    text-align: center;
    vertical-align: middle;
}

.tg .tg-9wq81 {
    border-color: inherit;
    text-align: center;
    vertical-align: middle;
}

.tg .tg-uzvj {
    border-color: inherit;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    font-size: var(--font-size-medium);
    background-color: #ddd;
}